<template>
  <el-dialog
    title="二维码下载"
    :visible.sync="visible"
    :append-to-body="true">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="type" align="center" label="二维码边长(cm)"></el-table-column>
      <el-table-column prop="juli" align="center" label="建议扫描距离(米)"></el-table-column>
      <el-table-column prop="px" align="center" label="下载链接">
        <template slot-scope="scope">
          <el-button type="text" @click="sellerCode(scope.row.cm)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer"><el-button @click="visible = false">关闭</el-button></span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      loading: false,
      tableData: [
        {
          type: '8cm',
          cm: '8',
          juli: '0.5m',
          px: ''
        },
        {
          type: '12cm',
          cm: '12',
          juli: '0.8m',
          px: ''
        },
        {
          type: '15cm',
          cm: '15',
          juli: '1.5m',
          px: ''
        },
        {
          type: '30cm',
          cm: '30',
          juli: '1.5m',
          px: ''
        },
      ]
    };
  },
  components: {

  },
  methods: {
    sellerCode(width) {
      var w = parseInt(width) * 25
      window.open(this.$http.adornUrl(`/hotel/hotelseller/wxcode?width=${w}`));
    },
    init() {
      this.visible = true;
      this.$nextTick(() => {});
    }
  }
};
</script>

<style>
.memberDetail .el-row {
  line-height: 38px;
}
.memberDetail .el-row:nth-child(2n) {
  margin-bottom: 12px;
}
.memberDetail .dataFormInfo .el-input {
  width: 80%;
}
.memberDetail .dataFormInfo .el-form-item__content {
  margin-left: 70px !important;
}
.memberDetail .dataFormInfo .el-form-item__label {
  padding: 0px !important;
  width: 70px !important;
}
.memberDetail .dataFormInfo .el-form-item {
  margin-bottom: 0px;
}
</style>
